<template>
  <div class="container">
    <DoingItem :doingList="doingList"></DoingItem>
    <DoneItem :doneList="doneList"></DoneItem>
  </div>
</template>

<script>
import DoingItem from "./DoingItem.vue";
import DoneItem from "./DoneItem.vue";

export default {
  props: ["doingList", "doneList"],
  components: { DoingItem, DoneItem },
  data() {
    return {};
  },
};
</script>

<style>
/* 内容 */
.doing,
.done {
  width: 600px;
  /* background-color: #ff0; */
  margin: 0 auto;
  overflow: hidden;
}
.main {
  height: 40px;
  overflow: hidden;
  margin: 20px 0;
}
.title {
  font: bolder 26px 楷书, sans-serif;
  line-height: 40px;
  float: left;
}
.demo {
  width: 25px;
  height: 25px;
  float: right;
  margin: 5px 5px 0 0;
  background-color: #f0f0f0;
  border-radius: 50%;
}
.main span {
  display: block;
  font-size: 23px;
  text-align: center;
  /* margin-top: 4px;
	margin-left: 9px; */
}
.doingItem,
.doneItem {
  width: 600px;
  height: 40px;
  /* width: 100%;
	height: 100%; */
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
  border-left: 5px solid #aa0000;
}
.doneItem {
  opacity: 0.5;
  border-left: 5px solid #005500;
}
.choose {
  width: 35px;
  height: 25px;
  float: left;
  margin-top: 7px;
}
.content {
  width: 300px;
  height: 22px;
  float: left;
  /* border: 1px solid #6b6b6b; */
  border-radius: 5px;
  padding-left: 5px;
  padding-top: 5px;
  margin-top: 6px;
}
.del {
  float: right;
  margin: 10px 13px 0 0;
  cursor: pointer;
}
</style>